<template>
	<div class="main">
		 <div ref="stickyHeader" v-sticky>
			<navTop></navTop>
			<div class="breadBox">
				<el-breadcrumb separator="/">
				  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				  <el-breadcrumb-item>考试管理</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div style="background:#F4F7FD;">
				<div class="searchlist">
					<div style="display: flex;align-items: center;">
						<span>时间：</span>
						<div class="inputBox" style="width:250px;margin-right:14px;">
							<el-date-picker
							@change="datapickchange"
							style="width:250px"
							  v-model="examdate"
							  type="daterange"
							  range-separator="至"
							  start-placeholder="开始日期"
							  end-placeholder="结束日期"
							  :default-time="['00:00:00', '23:59:59']">
							</el-date-picker>
						</div>
						<span>类型：</span>
						<el-select v-model="examobj.query.examType" placeholder="全部" @change="classsifychange" clearable>
						    <el-option
						      v-for="item in classifylist"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						</el-select>
						<span>年级：</span>
						<el-select v-model="examobj.query.gradeId" placeholder="全部" @focus="gradelistfocus" @change="gradelistchange" clearable>
							<el-option
							  key="0"
							  label="全部"
							  value="0">
							</el-option>
						    <el-option
						      v-for="item in gradelist"
						      :key="item.gradeId"
						      :label="item.name"
						      :value="item.gradeId">
						    </el-option>
						</el-select>
						<!-- <span>考试状态：</span>
						<el-select v-model="examobj.query.isEnable" placeholder="全部" @change="isenablechange">
						    <el-option
						      v-for="item in statuslist"
						      :key="item.bolen"
						      :label="item.name"
						      :value="item.bolen">
						    </el-option>
						</el-select> -->
					</div>
					<div style="display: flex;">
						<b @click="stopexambutton" style="background: rgba(236,85,90,0.06);border: 1px solid rgba(236,85,90,0.5);color:#EC555A;">已停用考试</b>
						<b style="margin:0 14px;" @click="addExam(0)">创建考试</b>
						<b @click="addExamcopy">创建复用考试</b>
					</div>
				</div>
			</div>
		</div>
		<div class="contentMain">
			<div class="contentMainlist">
				<div class="cmlLeft" style="position: relative;">
					<empty v-if="examlist.length==0"></empty>
					<ul v-else>
						<li v-for="item in examlist">
							<div>
								<h3>{{item.name}}</h3>
								<p>
									<span class="blue">{{item.examType==1?'作业/测验':item.examType==2?'月考':item.examType==3?'期中':'期末'}}</span>
									<span class="green">状态：{{item.subject4?item.subject4.length:0}}/{{item.examCourses.length}} {{!item.subject4?'未发布':'已发布'}}</span>
								</p>
								<div class="examInfo">
									<b><i>考试时间：</i>{{item.startTime | formatDate}}</b>
									<b>
										<i>考试范围：</i>
										<em v-if="item.studentRange.length===0">--</em>
										<em v-for="grade in item.studentRange" v-else>{{grade.gradeName?grade.gradeName:'--'}}</em>
									</b>
									<b><i>考试模式：</i>{{item.optionalName}}</b>
								</div>
								<div class="boxinfostyle" v-if="item.markHubType!=4">
									信息设置：
									<i v-for="sub in item.subject1">{{sub.examStage==1?sub.coursesName:'--'}}</i>
								</div>
								<div class="boxinfostyle">
									题卡扫描：
									<i v-for="sub in item.subject2">{{sub.examStage==2?sub.coursesName:'--'}}</i>
								</div>
								<div class="boxinfostyle" v-if="item.markHubType!=4">
									试卷评阅：
									<i v-for="sub in item.subject3">{{sub.examStage==3?sub.coursesName:'--'}}</i>
								</div>
								<div class="boxinfostyle">
									成绩分析：
									<i v-for="sub in item.subject4">{{sub.examStage==4?sub.coursesName:'--'}}</i>
								</div>
							</div>
							<div class="tyboxset">
								<em @click="examinfolist(item.id,item.startTime,item.endTime)">考试概览</em>
								<em @click="exampublishStatus(item.id)">考试停用</em>
							</div>
						</li>
					</ul>
					
				</div>
				<div class="cmlRight">
					<div class="cmlRightcontent">
						<h3>关于评阅</h3>
						<span class="clrtitle"><i>下载产品</i></span>
						<ul class="clrdownlost">
							<li>评阅产品（使用说明书）.pdf <a href=""><img src="../../assets/image/school/download.jpg" alt=""></a></li>
							<li>扫描客户端（安装包）.rar <a href=""><img src="../../assets/image/school/download.jpg" alt=""></a></li>
						</ul>
						<span class="clrtitle"><i>联系我们</i></span>
						<div class="boxcentercontact">
							<em>咨询客服</em>
							<em>留言反馈</em>
						</div>
						<ul class="ewmbox">
							<li>
								<img src="../../assets/image/school/xcx.jpg" alt="">
								<i>阅卷小程序</i>
							</li>
							<li>
								<img src="../../assets/image/school/xcx.jpg" alt="">
								<i>查分小程序</i>
							</li>
						</ul>
						<p class="boxbslmedu">百师云 bslmedu.com 版权所有<br>北京佰师博睿科技有限公司 京ICP备2021014688号-1</p>
					</div>
				</div>
			</div>
		</div>
		<div class="examfooter">
			<div class="examFootercontent">
				<span class="totaldata">共<i>{{total}}</i>条数据</span>
				<div>
					<el-pagination
						background
					      @current-change="handleCurrentChange"
						  :page-sizes="[3, 10, 20, 50]"
						  @size-change="handleSizeChange"
						  :page-size="examobj.pageSize"
						  layout="sizes, prev, pager, next"
					      :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<!-- 创建考试  v-if="addExamIshow"-->
		<examEdite v-if="addExamIshow" @addexamclick="addexamclick" :addexamtype="addexamtype"></examEdite>
		<!-- 创建复用考试 -->
		<examCopy v-if="examCopyIshow" @copyexamclick="copyexamclick" :type="0"></examCopy>
		<!-- 已停用考试 -->
		<div class="addExamMain" v-if="stopexamishow">
			<div class="addExamContent">
				<em class="el-icon-close" style="position: absolute;right:24px;top:24px;cursor: pointer;" @click="stopexamishow=false"></em>
				<h3 style="padding-bottom:10px;">已停用考试</h3>
				<p style="font-size: 14px;color: #EC555A;padding-bottom:24px">此列表仅展示已停用3个月内的考试，超过后考试无法启用</p>
				<div class="tableContent">
					<el-table
						class="custom-table"
					    ref="multipleTable"
					    :data="stopexamlist"
					    tooltip-effect="dark"
					    style="width: 100%"
						stripe
						:header-cell-style="{ background: '#D8E4F0', color: '#2A303B',fontWeight:'500' }">
					    <el-table-column
					      prop="optionalName"
					      label="考试类型">
					    </el-table-column>
					    <el-table-column
					      prop="studentNumber"
					      label="考试范围"
						  width="100">
						  <template slot-scope="scope">
							  <em v-if="scope.row.studentRange.length===0">--</em>
							  <em v-for="grade in scope.row.studentRange" v-else>{{grade.gradeName?grade.gradeName:'--'}}</em>
						  </template>
					    </el-table-column>
						<el-table-column
						  label="考试名称">
						  <template slot-scope="scope">
							  {{scope.row.name}}
						  </template>
						</el-table-column>
						<el-table-column
						  label="考试时间">
						  <template slot-scope="scope">{{ scope.row.startTime }}</template>
						</el-table-column>
						<el-table-column
							fixed="right"
							label="操作"
							align="center"
							width="80">
							<template slot-scope="scope">
								<div style="display: flex;">
									<el-button @click="qyongexam(scope.row.id)" type="text" size="small" style="display: flex;align-items: center;"><img src="../../assets/image/school/edit.png" style="width:12px;margin-right:5px;" />启用</el-button>
								</div>
							</template>
						</el-table-column>
					  </el-table>
				</div>
				<div style="display: flex;align-items: center;justify-content: space-between;">
					<div style="display: flex;align-items: center;">
						<el-pagination
							background
								small
						      @current-change="handleCurrentChange1"
						      :page-size="stoppagesize"
						      layout="total, prev, pager, next, jumper"
						      :total="stoptotal">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import navTop from "../../components/school/head.vue"
	import examEdite from '../../components/school/exditexam.vue'
	import examCopy from '../../components/school/copyexam.vue'
	import { get, post, del, put,dele } from '../../request/api.js'
	import empty from '../../components/school/empty.vue'
	export default{
		data(){
			return{
				searchInput:'',
				time:'',
				classify:'',
				grade:'',
				status:'',
				timelist:['2024年','2023年'],
				classifylist:[
					{name:'全部',id:'0'},
					{name:'作业/测验',id:1},
					{name:'月考',id:2},
					{name:'期中',id:3},
					{name:'期末',id:4}
				],
				gradelist:[],
				statuslist:[{name:'开启',bolen:true},{name:'停用',bolen:false}],
				addExamIshow:false,
				currentPage4: 4,
				examlist:[],
				examCopyIshow:false,
				examdate:'',
				total:null,
				examobj:{
					page:1,
					pageSize:3,
					query:{
						startTime:undefined,
						endTime:undefined,
						examType:'0',
						isEnable:true,
						gradeId:'0'
					}
				},
				addexamtype:0,
				stopexamlist:[],
				stoptotal:null,
				stoppage:1,
				stoppagesize:3,
				stopexamishow:false
			}
		},
		mounted() {
			// 获取考试列表
			this.examclicklist()
			 
		},
		methods:{
			 handleSizeChange(val) {
			        // //console.log(`每页 ${val} 条`);
					this.examobj.pageSize = val
			      },
			examclicklist(){
				this.examlist = []
				post('/exam/examlist',this.examobj)
				.then(res => {
				    if(res.code==200){
						let items = res.data.items.map(item => {  
						  const { examCourses, ...rest } = item; // 分离出 examCourses 和其他属性
						  const newExamCourses = {};
						  // 遍历 examCourses 并根据 examStage 和 markHubStatus 分类
						  examCourses.forEach(course => {
						    const stageKey = `subject${course.examStage}`;
						    const statusKey = course.markHubStatus === 3 ? 'examFaish' : stageKey;
						    if (!newExamCourses[statusKey]) {
						      newExamCourses[statusKey] = [];
						    }
						    newExamCourses[statusKey].push(course);
						  });
						
						  // 合并新的属性和原始的 examCourses
						  return { ...rest, examCourses, ...newExamCourses };
						});
						//console.info(items)
						this.examlist= items
						this.total = res.data.total
					}else{
						 this.$message.error(res.message);
					}
				})
				.catch(error => {
				  // 处理错误
				  //console.info(error)
				});
			},
			// 停用考试
			stopexambutton(){
				this.stopexamishow=true
				this.stopexamlist = []
				let examobj={
					page:this.stoppage,
					pageSize:this.stoppagesize,
					query:{
						startTime:undefined,
						endTime:undefined,
						examType:'0',
						isEnable:false,
						gradeId:'0'
					}
				}
				post('/exam/examlist',examobj)
				.then(res => {
				    if(res.code==200){
						this.stopexamlist= res.data.items
						this.stoptotal = res.data.total
					}else{
						 this.$message.error(res.message);
					}
				})
				.catch(error => {
				  // 处理错误
				});
			},
			// 处理每页条数变化
			handleSizeChange(val){
				this.examobj.pageSize = val
				 this.examclicklist()
			},
			// 处理当前页码变化
			handleCurrentChange(val){
				this.examobj.page = val
				 this.examclicklist()
			},
			handleCurrentChange1(val){
				this.stoppage = val
				 this.stopexambutton()
			},
			//获取年纪列表
			gradelistfocus(){
				get('/grade/list')
				.then(res => {
					//console.info(res)
				    if(res.code==200){
						this.gradelist = res.data
					}else{
						 this.$message.error(res.message);
					}
				})
				.catch(error => {
				  // 处理错误
				   this.$message.error(res.message);
				});
			},
			gradelistchange(){
				this.examclicklist()
			},
			classsifychange(){
				this.examclicklist()
			},
			isenablechange(){
				this.examclicklist()
			},
			datapickchange(value){
				console.info('value',value)
				if(value!=null){
					this.examobj.query.startTime= value[0]
					this.examobj.query.endTime= value[1]
					this.examclicklist()
				}else{
					this.examobj.query.startTime=undefined
					this.examobj.query.endTime= undefined
					this.examclicklist()
				}
				
				
				// //console.info(value)
			},
			// 新建考试
			addExam(){
				this.addExamIshow = true
			},
			addexamclick(data){
				//console.info(data)
				this.addExamIshow=data
				this.examclicklist()
			},
			addExamcopy(){
				this.examCopyIshow = true
			},
			copyexamclick(data){
				this.examCopyIshow = data
				this.examclicklist()
			},
			// 考试概览
			examinfolist(id,startTime,endTime){
				let params={
					id:id,
					startTime:startTime,
					endTime:endTime
				}
				sessionStorage.setItem('examContent',JSON.stringify(params))
				// ?examId='+id+'&startTime='+startTime+'&endTime='+endTime
				this.$router.push('/examoverview')
			},
			// 考试停用
			exampublishStatus(id){
				this.$confirm('停用考试后，考试列表不再显示该考试。 如需恢复使用请点击已停用考试按钮查询并启用考试，停用超过3个月后考试将无法启用。', '提示', {
					  confirmButtonText: '确定停用',
					  cancelButtonText: '取消',
					  type: 'warning'
				}).then(() => {
					  dele('/exam/stopexam', { examId: id })
					  .then(response => {
							if(response.code==200){
								this.examclicklist()
								this.$message({
									type: 'success',
									message: response.message
								});
								
							}else{
								this.$message({
									type: 'error',
									message: response.message
								});
							}
					  })
					  .catch(error => {
					    // 处理错误
					  });
				}).catch(() => {
					  this.$message({
						type: 'info',
						message: '已取消删除'
					  });          
				});
				
			},
			qyongexam(id){
				dele('/exam/enableexam', { examId: id })
				.then(response => {
					if(response.code==200){
						this.examclicklist()
						this.stopexamishow = false
						this.$message({
							type: 'success',
							message: response.message
						});
						
					}else{
						this.$message({
							type: 'error',
							message: response.message
						});
					}
				})
				.catch(error => {
				  // 处理错误
				});
			}
		},
		components:{navTop,examEdite,examCopy,empty}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:70px;
	}
	.breadBox{
		height:32px;
		background: #fff;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 40px;
		align-items: center;
		margin:14px auto 0;
	}
	.searchlist span{
		font-size:14px;
		color:#557292;
	}
	.searchlist .el-select{
		width:124px;
		margin-right:14px;
	}
	.searchlist >>> .el-input__inner{
		border-radius: 10px;
		height:35px;
		font-size:12px;
		line-height:35px;
	}
	.searchlist >>> .el-range__inner{
		border-radius: 10px;
		height:35px;
		font-size:14px;
		line-height:35px
	}
	.searchlist >>> .el-range-editor.el-input__inner{
		padding:0 10px;
	}
	.searchlist >>> .el-date-editor .el-range__icon{
		font-size:12px;
		line-height:35px;
	}
	.searchlist >>> .el-date-editor .el-range-input{
		font-size:12px;
		line-height:35px;
	}
	.searchlist >>> .el-date-editor .el-range-separator{
		font-size:12px;
		line-height:35px;
	}
	.searchlist >>> .el-input__icon{
		line-height:30px;
		font-size:14px;
	}
	.searchlist b{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
		line-height:34px;
		cursor: pointer;
	}
	.contentMainlist{
		display: flex;
		justify-content: space-between;
		margin-top:20px;
		position:relative;
	}
	.cmlLeft{
		width:calc(100% - 370px)
	}
	.cmlRight{
		box-sizing: border-box;
		width:352px;
		
	}
	.cmlRightcontent{
		background: #FFFFFF;
		padding:0 24px 24px;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
	}
	.cmlRight h3{
		border-bottom:solid 1px #DEE1E7;
		line-height:66px;
		font-size:18px;
	}
	.clrtitle{
		font-size:16px;
		color:#2A303B;
		position: relative;
		display: block;
		height:40px;
	}
	.clrtitle::before{
		content:'';
		position: absolute;
		width: 64px;
		height: 6px;
		background: linear-gradient( 90deg, #527BFF 0%, #FFFFFF 100%);
		border-radius: 3px;
		left:0;
		bottom:0;
		z-index:1;
		opacity: 0.5;
	}
	.clrtitle i{
		position: absolute;
		left:0;
		bottom:0;
		font-style: normal;
		z-index:2
	}
	.clrdownlost li{
		display: flex;
		justify-content: space-between;
		padding-left:28px;
		font-size:14px;
		padding:6px 0 6px 35px;
		margin-top:14px;
	}
	.clrdownlost li:first-child{
		background:url(../../assets/image/school/pdf.jpg) no-repeat;
		background-size:contain
	}
	.clrdownlost li:last-child{
		background:url(../../assets/image/school/wj.jpg) no-repeat;
		background-size:contain
	}
	.boxcentercontact{
		display: flex;
		justify-content:space-between;
		margin-top:14px;
	}
	.boxcentercontact em{
		box-sizing: border-box;
		display: inline-block;
		width: 145px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #DEE1E7;
		text-align: left;
		font-size:14px;
		color:#557292;
		padding-left:36px;
		line-height:34px;
	}
	.boxcentercontact em:first-child{
		background:#F2F6FB url(../../assets/image/school/mess.jpg) no-repeat 15px center;
	}
	.boxcentercontact em:last-child{
		background:#F2F6FB url(../../assets/image/school/bj.jpg) no-repeat 15px center;
	}
	.cmlLeft ul li{
		display: flex;
		justify-content: space-between;
		background:#fff;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		margin-bottom:20px;
		align-items: center;
		padding:24px;
	}
	.cmlLeft ul li:last-child{
		margin-bottom:0;
	}
	.cmlLeft ul li h3{
		font-size:18px;
		color: #2A303B;
	}
	.cmlLeft ul li p{
		display: flex;
		padding:10px 0;
	}
	.cmlLeft ul li p span{
		display: inline-block;
		height:24px;
		line-height:24px;
		font-size:12px;
		margin-right:10px;
		padding:0 10px;
	}
	.cmlLeft ul li p span.blue{
		background: rgba(41,92,255,0.04);
		border-radius: 6px;
		border: 1px solid #295CFF;
		color:#295CFF;
	}
	.cmlLeft ul li p span.green{
		background: rgba(40,143,65,0.04);
		border-radius: 6px;
		border: 1px solid #288F41;
		color:#288F41;
	}
	.examInfo{
		display: flex;
		align-items: center;
	}
	.examInfo b{
		font-weight: normal;
		font-size:14px;
		color:#333;
		position: relative;
		padding-right:14px;
		margin-right:14px;
	}
	.examInfo b i{
		font-style:normal;
		color:#8E96A4
	}
	.examInfo b::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#DEE1E7;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.examInfo b:last-child::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#fff;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfostyle{
		display: flex;
		color:#8E96A4;
		font-size:14px;
		margin-top:10px;
	}
	.boxinfostyle i{
		display: flex;
		font-style: normal;
		padding-right:10px;
		margin-right:10px;
		position: relative;
		color:#5B6371
	}
	.boxinfostyle i::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#DEE1E7;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfostyle i:last-child::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#fff;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.tyboxset em{
		display:block;
		width: 104px;
		height: 34px;
		border-radius: 10px;
		line-height:34px;
		font-size:14px;
		text-align: center;
		cursor: pointer;
	}
	.tyboxset em:last-child{
		margin-top:14px;
		background: rgba(236,85,90,0.06);
		border: 1px solid #FF2953;
		color:#EC555A;
	}
	.tyboxset em:first-child{
		background: #295CFF;
		color:#fff;
	}
	.examfooter{
		width:100%;
		height:54px;
		background: rgba(255,255,255,0.9);
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		position:fixed;
		left:0;
		bottom:0;
	}
	.examFootercontent{
		width:auto;padding:0 40px;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.examFootercontent .totaldata{
		font-size:14px;
	}
	.examFootercontent .totaldata i{
		display: inline-block;
		color:#295CFF;
		font-style: normal;
		line-height:54px;
		padding:0 3px;
	}
	.ewmbox{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top:14px;
	}
	.ewmbox li{
		box-sizing: border-box;
		width: 145px;
		height: 175px;
		background: #F2F6FB;
		border-radius: 20px;
		text-align: center;
		padding-top:14px;
	}
	.ewmbox li i{
		display: block;
		font-size:14px;
		color:#2A303B;
		font-style: normal;
		padding-top:5px;
	}
	.ewmbox li img{
		width:121px;
		height:121px;
		border-radius:10px
	}
	.boxbslmedu{
		font-size:12px;
		color:#8E96A4;
		text-align: center;
		padding-top:44px;
		line-height:1.8
	}
	.inputBox{
		width: 200px;
	}
	
	
	
	
	
	
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:5;
	}
	.addExamContent{
		width: 584px;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.tableContent{
		border-radius: 10px;
		height:300px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.tableContent::-webkit-scrollbar {
		 width:6px;
		background-color: #eee;
		border-radius:10px;
	}
	.tableContent::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.tableContent::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.tableContent table{
		border-radius: 10px;
		border: 1px solid rgba(216,228,240,0.5);
	}
	.tableContent table tr th{
		font-size:14px;
		font-weight:normal;
		background:#E8F0FA;
		height:42px;
	}
	.tableContent table tr th:first-child{
		border-radius: 8px 0 0 0;
	}
	.tableContent table tr th:last-child{
		border-radius: 0 8px 0 0;
	}
	.tableContent table tr td{
		height:42px;
		text-align: center;
		font-size:14px;
		border-right:solid 1px rgba(216,228,240,0.34);
	}
	.tableContent table tr td:last-child{
		border-right:none;
	}
	.tableContent table tr td i{
		display: block;
		font-style: normal;
		font-size:12px;
		color:#999
	}
	.tableContent table tr td em{
		display: block;
	}
	.tableContent table tr td span{
		position:relative;
		display: inline-block;
		cursor: pointer;
	}
	.tableContent table tr td span em{
		font-size:12px;
		font-style:normal;
	}
	.tableContent table tr td span::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#000;
	}
	.tableContent table tr td span.green{
		color:#288F41
	}
	.tableContent table tr td span.green::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#288F41;
	}
	.tableContent table tr td span.blue{
		color:#295CFF
	}
	.tableContent table tr td span.blue::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#295CFF;
	}
	.tableContent table tr td span.red{
		color:#EC555A
	}
	.tableContent table tr td span.red::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#EC555A;
	}
	.tableContent table tr td span.gray{
		color:#D8E4F0
	}
	.tableContent table tr td span.gray::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#D8E4F0;
	}
	.tableContent table tr:nth-child(3n){
		background:#FAFAFB
	}
	.el-message-box__status.el-icon-warning{
		color:#ec555a !important;
	}
	.examFootercontent >>> .el-pagination.is-background .el-pager li:not(.disabled).active{
		background-color:#295CFF !important;
	}
	.header {
	  background-color: #f8f8f8;
	  text-align: center;
	  transition: all 0.3s ease; /* 添加过渡效果 */
	}
	
	.sticky {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  z-index: 100;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 吸顶时添加阴影 */
	}
	.el-button--primary{
		background:#ec555a !important
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
</style>